<template>
    <el-popover
      className="select-multiple"
      :width="width"
      trigger="click">
        <div style="display: flex;justify-content: space-between;align-items: center">
          <el-button type="text"  @click="handleCheckAllChange">全选</el-button>
          <el-button type="text" @click="handleCheckClearChange">清空</el-button>
        </div>
            <el-table
            @selection-change="handleSelectionChange"
            @row-click="handleRowClick"
            :row-key="(row) => {return row.id}"
            :data="list.filter(val => !search || val.name.toLowerCase().includes(search.toLowerCase()))"
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%">
              <el-table-column
                type="selection"
                :reserve-selection="true"
                width="55">
              </el-table-column>
              <el-table-column
                align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                  <span>{{scope.row.name}}</span>
                </template>
              </el-table-column>
          </el-table>
      <div slot="reference"
           style="    width: 100%;">
        <div style="
        width: 100%;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        min-height: 32px;
        margin-top: 4px;
        max-height: 100px;" >
          <div  style="
                   padding: 5px 3px;
                   background: #f4f4f5;
                   margin: 2px 0 2px 6px;
                   color: #909399;
                   border-radius: 4px;
                   height: 24px;
                   padding: 0 8px;
                   line-height: 22px;"
                v-for="item in textValue"
                :key="item.id"
               >
            {{item.name}}
            <i style="background-color: #c0c4cc;
                border-radius: 50%;
                text-align: center;
                position: relative;
                cursor: pointer;
                font-size: 12px;
                height: 16px;
                width: 16px;
                line-height: 16px;
                vertical-align: middle;
                speak: none;
                font-style: normal;
                font-weight: 400;
                font-variant: normal;
                text-transform: none;
                display: inline-block;
                -webkit-font-smoothing: antialiased;    margin-top: -2px;
                top: -1px;
                right: -5px;    transform: scale(.8);
                color: #909399;" class="el-tag__close el-icon-close" @click="onDelete(item)"></i>
          </div>
        </div>
      </div>
    </el-popover>
</template>

<script>
export { default } from './Index'
</script>

<style lang='scss'>
@import url(index.scss);
.el-tag__close:hover{
  color: #fff !important;
}
</style>
